<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./echarts.min.js"></script>
<style>
    .box {
        width: 800px;
        height: 400px;
        border: 1px solid rgb(180, 248, 228);
    }
</style>
<body>
    <div class="box"></div>
    
</body>
<script>
     // 选择节点
     let dom = document.querySelector(".box")
    // 初始化
    let myChart = echarts.init(dom)
    console.log(myChart);
     // 设置配置项
     let option = {
        title: {
            text: "用户来源"
        },
        xAxis: {
            type: 'category',  // 当前坐标轴为类目轴
            data: ["2017-12-27", "2017-12-28", "2017-12-29", "2017-12-30", "2017-12-31", "2018-1-1"],
            boundaryGap:false,   //  图形津贴Y坐标轴
        },
        yAxis: {
            type: "value", //  当前坐标轴为数值轴
            show:true,
            axisLine:{
                show:true,  //   显示Y轴实线
            }
        },
        //  图例
        legend: {
           left:"35%", 
        },   
        // 提示
        tooltip: {
            trigger:"axis",  //   鼠标放在坐标轴的时候   显示tooltip
            axisPointer:{
                type:"cross",   //  十字交叉类型
                label:{       //  pointer的文字和背景色样式
                    color:"#f9c3c5",
                    backgroundColor:"#dddffc"
                }, 
            },
            backgroundColor:"rgba(0, 0, 0,0.7)", //  tooltip的背景色
            textStyle:{
                color:"#fefefe"   //  tooltip文字
            }
        },
        // 系列
        series: [
            {
                type: "line",
                data: [2000,3000, 4500, 3800, 3500,  7000],
                // 设置面积图的背景色
                areaStyle:{
                    color:"rgba(255, 255, 255)"
                },
                name: "华东"
            },
            {
                type: "line",
                data: [7090, 5200, 8400, 10000, 10000, 14000],
                // 设置面积图的背景色
                areaStyle:{
                    color:"rgba(178, 219, 158)"
                },
                name: "华南"
            },
            {
                type: "line",
                data: [15000, 10000, 15000, 22000, 23000, 26000],
                // 设置面积图的背景色
                areaStyle:{
                    color:"rgba(251, 216, 138)"
                },
                name: "华北"
            },
            {
                type: "line",
                data: [25000, 15000, 24000, 35000, 37000,  40000],
                // 设置面积图的背景色
                areaStyle:{
                    color:"rgba(243, 148, 148)"
                },
                name: "西部"
            },
            {
                type: "line",
                data: [40000, 20000, 35000, 50000, 52000,  54000],
                // 设置面积图的背景色
                areaStyle:{
                    color:"rgba(157, 211, 232)"
                },
                name: "其他"
            },
        ],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,  //  显示坐标轴的表情
        },

    }
    //  使用配置项
    myChart.setOption(option)  
</script>
</html>